<template>
    <view
        class="country-container"
        :style="{
            backgroundColor: bg_color,
        }"
    >
        <view
            v-if="rule"
            class="rules-icon"
            @click="showRuleFn"
            >活动规则</view
        >
        <!-- <image
            :src="bg_img"
            mode="widthFix"
            style="position: absolute; top: 0px; z-index: -1; width: 100%"
        ></image> -->
        <image
            :src="bg_img"
            mode="widthFix"
            style="width: 100%"
        ></image>
        <!-- <view style="padding-top: 35%"> -->
        <view class="forecast-container">
            <view class="forecast">
                我预测冠军是
                <text class="chooseData">
                    <!-- 高度占位 -->
                    <text style="visibility: hidden">1</text>
                    {{ chooseData.country || '' }}
                    <text style="visibility: hidden">1</text> </text
                >, 最终冠军
                <text class="chooseData">
                    <!-- 高度占位 -->
                    <text style="visibility: hidden">1</text>
                    {{ champion.country || '' }}
                    <text style="visibility: hidden">1</text>
                </text>
                <!-- <image
                    mode="widthFix"
                    style="width: 80rpx"
                    :src="champion.national_flag"
                ></image> -->
            </view>
            <view>
                <u-row gutter="20">
                    <u-col
                        span="3"
                        v-for="(item, index) in countryList"
                        :key="index"
                        @click="currentChoose(item)"
                    >
                        <view
                            :class="{
                                'is-cur-item':
                                    item.european_country_id ==
                                    chooseData.european_country_id,
                            }"
                            class="country-item"
                        >
                            <image
                                mode="aspectFill"
                                class="cell-item-image"
                                :src="item.national_flag"
                            ></image>
                            <view class="cell-item-name">
                                {{ item.country || '' }}
                            </view>
                        </view>
                    </u-col>
                </u-row>
            </view>
            <view style="margin: 20rpx">
                <b-u-button-grey
                    v-if="[1, 2].includes(isChoose)"
                    height="80rpx"
                    width="50%"
                >
                    已参与
                </b-u-button-grey>
                <b-u-button-theme
                    v-else
                    height="80rpx"
                    width="50%"
                    @click.stop="confirm"
                >
                    确定
                </b-u-button-theme>
            </view>
        </view>
        <close-popup
            :show-pop="showRule"
            @onClose="showRule = false"
        >
            <view class="rules">
                <view class="rule-title"> 活动规则 </view>
                <u-parse
                    :html="rule"
                    :tag-style="{ img: 'display:block' }"
                ></u-parse>
            </view>
        </close-popup>
    </view>
</template>

<script>
export default {
    name: 'champion',
    data() {
        return {
            userInfo: {},
            /*队伍列表*/
            countryList: [],
            /*0:未选，1：已选，2：接口请求没回来*/
            isChoose: 2,
            /*所选队伍*/
            chooseData: {
                country: '',
                european_country_id: '',
                national_flag: '',
            },
            rule: '',
            bg_img: '',
            bg_color: '',
            showRule: false,
            champion: {
                country: '',
                national_flag: '',
            },
        };
    },
    async onShow() {
        await this.$onLaunched;
        this.getHttp();
    },
    methods: {
        getHttp() {
            this.getUserInfo();
            this.getCountryList();
            this.getEuropeanActivity();
        },
        async getUserInfo() {
            try {
                const res = await uni.$u.api.userInfo();
                this.userInfo = res.userInfo;
            } catch (error) {}
        },
        async getCountryList() {
            try {
                const res = await uni.$u.api.getCountryList();
                this.countryList = res?.list ?? [];
                this.chooseData = res?.choose_data ?? {};
                this.bg_img = res.bg_img;
                this.isChoose = this.chooseData.is_choose;
                this.champion = res?.champion ?? this.champion;
            } catch (error) {
                console.log(error);
            }
        },
        async getEuropeanActivity() {
            try {
                const res = await uni.$u.api.getEuropeanActivity();
                this.rule = res.data.rule;
                this.bg_color = res.data.bg_color;
            } catch (error) {}
        },
        async currentChoose(item) {
            try {
                if (this.isChoose == 1) {
                    uni.showToast({
                        title: '您已参与',
                        icon: 'none',
                    });
                    return;
                }
                if (this.isChoose == 2) {
                    uni.showToast({
                        title: '请稍后再选',
                        icon: 'none',
                    });
                    return;
                }
                this.chooseData = { ...this.chooseData, ...item };
            } catch (error) {}
        },
        async confirm() {
            try {
                if (uni.$u.test.isEmpty(this.userInfo.mobile)) {
                    uni.navigateTo({
                        url: '/pages/login/login',
                    });
                    return;
                }
                if (this.isChoose == 1) {
                    uni.showToast({
                        title: '您已参与',
                        icon: 'none',
                    });
                    return;
                }
                if (this.isChoose == 2) {
                    uni.showToast({
                        title: '请稍后再选',
                        icon: 'none',
                    });
                    return;
                }
                if (uni.$u.test.isEmpty(this.chooseData.european_country_id)) {
                    uni.showToast({
                        title: '请至少选择一个队伍',
                        icon: 'none',
                    });
                    return;
                }
                // 提交所选，待增加接口
                const { european_country_id } = this.chooseData;
                const res = await uni.$u.api.postGuessingChampion({
                    european_country_id,
                });
                this.getCountryList();
                uni.showToast({
                    title: '选择成功',
                    icon: 'none',
                });
            } catch (error) {}
        },
        showRuleFn() {
            if (this.rule) {
                this.showRule = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.country-container {
    position: relative;
    // background-color: #0130f0;
    min-height: 100vh;
}
.country-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid rgba(187, 0, 37, 0);
    border-radius: 8rpx;
    padding: 4rpx;
    margin-top: 20rpx;
    background-color: #2d2d2dcc;
    color: #fff;
}
.is-cur-item {
    // border: 2px solid #bb0024;
    border: 2px solid #6af381;
    background-color: #42ce59;
    color: #fff;
}
.cell-item-image {
    width: 100%;
    height: 100rpx;
}
.cell-item-name {
    margin: 5rpx 0 0;
}
.forecast-container {
    padding-bottom: 20rpx;
}
.forecast {
    display: flex;
    align-items: center;
    // margin: 20rpx;
    color: #fff;
    justify-content: center;
}
.chooseData {
    display: inline-block;
    min-width: 150rpx;
    font-size: 38rpx;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ffffff;
    color: yellow;
}
.rule-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
}
.rules {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    padding: 20rpx;
    border-radius: 24rpx;
    background-color: #000000;
    opacity: 0.7;
    color: #fff;
}
.rules-icon {
    position: absolute;
    right: 0;
    top: 30rpx;
    background-color: #00000075;
    color: #fff;
    padding: 6rpx 20rpx;
    font-size: 24rpx;
    border-radius: 24rpx 0 0 24rpx;
}
</style>
